import { FC, useCallback, useEffect, useRef, useState } from "react";
import { WebRtcStreamerxiaoxujs } from "../../api/webrtcstreamer";
import { getLoadEquipCameraIp } from "../api";

const VideoOne:FC<{value:string}> = ({value})=>{

    const videoEle = useRef(null);//视频连接
    const videoEleAdd = useRef<any>();
    const [rtspValue,setRtspValue] = useState("")
    useEffect(()=>{
      let value = rtspValue
        if(value){          
          if (videoEle.current) {
            console.log(videoEle.current);
                videoEleAdd.current = new WebRtcStreamerxiaoxujs(
                  videoEle.current!,
                  "http://localhost:8001"
                );                
                videoEleAdd.current.connect(value);
              }
        }
        return () => {
            if (videoEleAdd.current) {
              videoEleAdd.current.disconnect();
            }
          };
    },[rtspValue])
    
    const listFun = useCallback(async ()=>{
      const  data:any  = (await getLoadEquipCameraIp(
        { channelName:value}
        ))
        console.log(data);
        setRtspValue(data)
    },[value])

    useEffect(()=>{
      listFun()
    },[listFun])

    return(
        <video
            ref={videoEle}
            style={{
                width: "100%",
                height: "100%",
                border: "1px soild rgb(0,87,104)",
                objectFit: "cover",
            }}
            id={`video`+value}
            controls
            muted
            preload="auto"
        ></video>
    )
}

export default VideoOne